<template>
  <view class="tabs flexR">
  	<view v-for="(item,i) in list" :key='i' class="tab" :class="current===i?'active':''" @click="handleTab(i)">
  		<text>{{item.name}}</text>
  	</view>
  </view>
</template>

<script>
  export default {
    name:"leftTabs",
    props:{
    	list:{
    		type:Array,
    		default:() => {
    			return []
    		}
    	},
    	current:{
    		type:Number,
    		default:0
    	}
    },
    data() {
      return {
        
      };
    },
    methods: {
      handleTab(i){
        // this.current = i
        this.$emit('update:current',i)
      	this.$emit('handleChange',i)
      }
    }
  }
</script>

<style lang="less">
.tabs {
  padding-top: 32upx;
  gap: 48upx;
  padding-bottom: 24upx;
  background-color: #FFF;
  .tab {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28upx;
    color: rgba(0,0,0,0.4);
    line-height: 44upx;
  }
  .active {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32upx;
    color: rgba(0,0,0,0.7);
    line-height: 44upx;
    position: relative;
    &:before {
      content: '';
      display: block;
      position: absolute;
      bottom: -18upx;
      left: 50%;
      transform: translateX(-50%);
      width: 52upx;
      height: 8upx;
      background: #3E81F7;
      border-radius: 8upx;
    }
  }
}
</style>